<template>
  <view class="em-page-wrap">
    <view class="em-page" :style="[styles.wrap]">
      <slot></slot>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'em-page', // em全称，explain-mall，表示explain商城UI组件库
    props: {
      emStyles: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      return {
        styles: {
          wrap: {
            'background-color': 'rgba(0,0,0,0)'
          }
        }
      }
    },
    watch: {
      emStyles: {
        handler(val) {
          Object.keys(this.styles).forEach(key => {
            var style = this.styles[key]
            var emStyle = this.emStyles[key]
            if (emStyle && typeof emStyle === 'object') {
              this.styles[key] = Object.assign(style, emStyle)
            }
          })
        },
        immediate: true,
        deep: true
      }
    }
  }
</script>

<style>
  .em-page-wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  /* #ifdef MP-WEIXIN */

  :host {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: flex-start;
  }

  /* #endif */

  .em-page {
    flex: 1;
    transition-property: background-color;
    transition-duration: 0.25s;
  }
</style>
